﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
    <link href="css/ui.jqgrid.css" rel="stylesheet" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/i18n/grid.locale-en.js"></script>
    <script src="js/jquery.jqGrid.min.js"></script>
    <script src="js/JqGridHelper.js"></script>
    <script type="text/javascript" src="js/jquery.json-2.3.min.js"></script>
    <script type="text/javascript" src="js/Hashtable.js"></script>
    <script type="text/javascript" src="js/DataService.js"></script>
    <script type="text/javascript">
        var ds = new DataService({
            url: 'Search.ashx',
            qn: 'demotable',
            idcol: 'strSCode',
            coli: '',
            page: 1,
            rows: 15,
            sidx: null,
            sord: null,
            searchField: null,
            searchString: null,
            searchOper: null
        });
        ds.filter.AddRuler('strPYShort', 'bw', 's');
        ds.filter.SetFilterGroupOP('OR');

        function testDataService() {
            ds.GetData(function (data) {
                alert($.toJSON(data));
            });
        }
        $(document).ready(
            function () {
                $("#demotable").jqGrid({
                    url: "/Search.ashx?qn=demotable&idcol=strSCode&coli=3",
                    datatype: "json",
                    colNames: ['rowid', 'strSCode', 'strSName', 'strPYShort'],
                    colModel: [
                         { name: 'rowid', index: 'rowid', sortable: false },
                       { name: 'strSCode', index: 'strSCode' },
                       { name: 'strSName', index: 'strSName' },
                       { name: 'strPYShort', index: 'strPYShort' }],
                    rowNum: 30,
                    rowList: [15, 30, 45],
                    pager: '#demodiv',
                    sortname: 'strSCode',
                    multiselect: true,
                    viewrecords: true,
                    sortorder: "desc",
                    caption: "",
                    height: '435',
                    width: '918',
                    jsonReader: { repeatitems: false }
                });
                $("#demotable").jqGrid('navGrid', '#demodiv', { edit: false, add: false, del: false },
                             {}, {}, {}, { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, {});
            });
    </script>
</head>
<body>
    <input type="button" value="test" onclick="testDataService();" />
    <table id="demotable"></table>
    <div id="demodiv"></div>
</body>
</html>
